<!-- <p>inner-directive works!</p> -->
<!-- <p></p> -->
<h1>内置属性指令</h1>
<p [class]="classStr">动态class属性绑定</p>
<p class="{{classStr}}">动态class属性绑定</p>
<input type="button" value="移除|增加fc样式" (click)="removeClass('fc')">
<input type="button" value="移除|增加fs样式" (click)="removeClass('fs')">
<input type="button" value="移除|增加bc样式" (click)="removeClass('bc')">
<input type="button" value="移除|增加border样式" (click)="removeClass('border')">
<hr>
<p [ngClass]="classStr">ngClass 绑定字符串</p>
<p [ngClass]="classArr">ngClass 绑定数组</p>
<input type="button" value="移除|增加fc样式" (click)="removeClassArr('fc')">
<input type="button" value="移除|增加fs样式" (click)="removeClassArr('fs')">
<input type="button" value="移除|增加bc样式" (click)="removeClassArr('bc')">
<input type="button" value="移除|增加border样式" (click)="removeClassArr('border')">
<hr>
<p [ngClass]="classObj">ngClass 绑定对象</p>
<input type="button" value="移除|增加fc样式" (click)="classObj.fc=!classObj.fc">
<input type="button" value="移除|增加fs样式" (click)="classObj.fs=!classObj.fs">
<input type="button" value="移除|增加bc样式" (click)="classObj.bc=!classObj.bc">
<input type="button" value="移除|增加border样式" (click)="classObj.border=!classObj.border">
<hr>
<p [ngStyle]="styleObj">ngStyle 样式取值必须为对象</p>
<h1>结构指令</h1>
<p *ngIf="flag">*ngIf指令</p>
<input type="button" value="切换flag" (click)="flag=!flag">
<p>num:{{num}}</p>
<p *ngIf="num<0">小于0</p>
<p *ngIf="num==0">等于0</p>
<p *ngIf="num>0">大于0</p>
<input type="button" value="+" (click)="num=num+1">
<input type="button" value="-" (click)="num=num-1">
<hr>
<ng-template [ngIf]="flag">
    <p>标签1</p>
    <p>标签2</p>
</ng-template>
<hr>
<p>name:{{name}}</p>
<input type="text" value="" #input (input)="name=input.value">
<!-- <div [ngSwitch]="name">
    <span *ngSwitchCase="'yifei'">刘亦菲</span>
    <span *ngSwitchCase="'chaoyue'">杨超越</span>
    <span *ngSwitchDefault>云韵</span>
</div> -->
<div [ngSwitch]="name">
    <span *ngSwitchCase="'yifei'">刘亦菲</span>
    <span *ngSwitchCase="'chaoyue'">杨超越</span>
    <span *ngSwitchDefault>云韵</span>
</div>
<h1>循环指令</h1>
<ul>
    <li *ngFor="let v of arr;
            let i=index;
            let f=first;
            let l=last;
            let e=even;
            let o=odd;
    ">{{i}}:{{v}}:{{f}}:{{l}}:{{e}}:{{o}}</li>
</ul>
<hr>
<ul>
    <li *ngFor="let item of getSizeArr();let i =index;">{{i}}</li>
</ul>
<hr>
<input type="text" (input)="str=$event.target.value">
<ul>
    <li *ngFor="let v of getStrArr();let i=index">{{i}}:{{v}}</li>
</ul>
<hr>
<ul>
    <li *ngFor="let key of getObjArr('keys');">{{obj[key]}}</li>
</ul>
<ul>
    <li *ngFor="let key of getObjArr('values');">{{key}}</li>
</ul>
<ul>
    <li *ngFor="let key of getObjArr('entries');">{{key[0]}}:{{key[1]}}</li>
</ul>
<hr>
<ul>
    <li *ngFor="let entry of getObjArr('entries')">
        <span *ngFor="let temp of entry">{{temp}}</span>
    </li>
</ul>